<template>
  <div ref="bar" style="width:100%; height:100%;"></div>
</template>

<script>
import * as echarts from "echarts";
    export default {
        name: "",
        props: {// 接受父组件的值
          seriesData:{
            type:Array,
          },
        },
        data(){
            return{
              chart: null,
              seriesData1: [],

            }
        },
        watch: {
          seriesData: {
            handler(val, old) {
              this.seriesData1 = this.seriesData;
              this.initChart();
              //console.log(val+"监听数据");
            },
            deep: true,
          },
        },
        mounted() {
          setTimeout(() => {
            this.$nextTick(() => {
              this.initChart();
            });
          }, 500);

        },
        created() {
          this.seriesData1 = this.seriesData;
        },
        methods:{
          initChart(){
            let ref = this.$refs.bar;

            let xAxisData = this.seriesData1.map((it) => {
              return it[0];
            }).reverse();

            let yAxisData = this.seriesData1.map((it) => {
              return it[1];
            }).reverse();

            if (ref && ref !== undefined) {
              this.chart = echarts.init(ref);

              this.chart.setOption(
                {
                  /*title: {
                    text: "事件考核-各机构加、扣分考核对比",
                    x: "center", // 水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                    y: "bottom",
                  },*/

                  tooltip: {
                    trigger: "axis",
                    axisPointer: {
                      type: "shadow",
                    },
                  },
                  // legend: {},
                  grid: {
                    top: 30,
                    bottom: 50,
                  },
                  xAxis: {
                    type: "value",
                    position: "top",
                    splitLine: {
                      lineStyle: {
                        type: "dashed",
                      },
                    },
                  },
                  yAxis: {
                    type: "category",
                    data: xAxisData,
                    show:false,
                  },
                  series: [
                    {
                      data: yAxisData,
                      barMaxWidth: "30",
                      color: "#5470c6",
                      name: "Cost",
                      type: "bar",
                      stack: "Total",
                      label: {
                        show: true,
                        formatter: "{b}",
                      },
                    },
                  ],
                },
                true
              );
            }
          },
        },
    };
</script>

<style scoped>
/deep/[data-v-37c029ad] .el-form-item--small.el-form-item{margin-top: 0!important;}
/deep/.el-avatar{background: #fff!important;display: flex;justify-content: center}
.userBoxShadow{
  border: 4px solid #fff;
  -webkit-box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  box-shadow: 5px 0px 10px rgba(150, 150, 192, 0.5);
  margin-right: 25px;border-radius: 50%;
}
</style>
